<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模拟Vuex-Store类</title>
</head>

<body>
  <div></div>
  <script>
    let Vue = null
    class Stroe {
      constructor(options) {
        const {
          state = {},
            getters = {},
            mutations = {},
            actions = {}
        } = options
        //响应式的
        this.state = _vue.observable(state)
        this.getters = Object.create(null)
        Object.keys(getters).forEach(key => {
          Object.defineProperty(this.getters, key, {
            get: () => getters[key](state)
          })
        })
        this._mutations = mutations
        this._actions = actions
      }
      commit(type, payload) {
        this._mutations[type](this.state, payload)
      }
      dispatch(type, payload) {
        this._actions[type](this, payload)
      }
    }

    function install(Vue) {
      _Vue = Vue
      _vue.minix({
        beforeCreate() {
          if (this.options.store) {
            _vue.prototype.$store = this.$options.store
          }
        }
      })
    }

    export default {
      Store,
      install
    }
  </script>
</body>

</html>